<template>
	<up-popup :show="modelValue"  mode="bottom" closeOnClickOverlay :round="20" @close="_login_close">
		<view class="popup_login">
			<view class="w-max popup_login_header">
				<text style="font-size: 34rpx; font-weight: bold">登录授权</text>
				<up-icon name="close" size="40rpx" color="#909399" @click="_login_close"></up-icon>
			</view>

			<button v-show="!is_mobel" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" class="btn">
				<view class="popup_login_btn">
					<text>一键登录</text>
				</view>
			</button>
			<!-- <view style="width: 100%" v-show="is_mobel">
				<view class="input-item flex align-center">
					<view class="iconfont icon-user icon"></view>
					<input v-model="loginForm.username" style="width: 100%" class="input" type="number" placeholder="请输入手机号" maxlength="30" />
				</view>
				<view class="input-item flex align-center" style="width: 100%; margin: 0px">
					<view class="iconfont icon-code icon"></view>
					<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="8" />
					
					<view class="code_btn">
						<up-code :seconds="60" @end="end" keepRunning @start="start" ref="uCodeRef" @change="codeChange"></up-code>
						<view class="code_btn_item" :class="[]" @click="getMsgCode">{{ tips }}</view>
					</view>
				</view>
				<view class="popup_login_btn" @click="vxLogin('', 'code')">
					<text>登录</text>
				</view>
			</view> -->
			<!-- <view style="margin-top: 30rpx; margin-bottom: 20rpx; display: flex; justify-content: flex-end; color: #989898; font-size: 28rpx" @click.stop="is_mobel = !is_mobel">
				{{ !is_mobel ? '手机验证码登录' : '切换为一键登录' }}
			</view> -->

			<view class="popup_login_msg mt-[20rpx]">
				<up-checkbox-group placement="column" v-model="aloneChecked">
					<up-checkbox size="28rpx" activeColor="#ccaa6f" label="" name="agreement"></up-checkbox>
				</up-checkbox-group>
				<view class="agreements">
					登录视为同意
					<text class="agreements_text" @click="push('/pages/agreement/user_agreement')">《用户服务协议》</text>
					和
					<text class="agreements_text" @click="push('/pages/agreement/privacy_agreement')">《隐私政策》</text>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
import { ref, watch, defineProps } from 'vue';
import { wxLogin } from '@/api/oauth';
import { getWxCode } from '@/utils/geek';
import useUserStore from '@/store/modules/user';
import { getToken, setToken, removeToken } from '@/utils/auth';
const userStore = useUserStore();
const is_mobel = ref(false);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});

//监听
watch(
  () => userStore.showLoginPopup,
  (newVal) => {
    if (newVal == true) {
		emit('update:modelValue', true);
	}
  }
);
const push = (url) => {
	uni.navigateTo({
		url: url
	});
};
// 短信验证码登录逻辑
// const tips = ref('');
// const seconds = ref(10);
// const uCodeRef = ref(null);
// const codeChange = (text) => {
// 	tips.value = text;
// };
// const mobileReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/g;
// const getMsgCode = () => {
// 	if (loginForm.value.username == '') return uni.$u.toast('请输入手机号码');
// 	if (uCodeRef.value.canGetCode) {
// 		uni.showLoading({
// 			title: '正在获取验证码',
// 			mask: true
// 		});
// 		getSmsSend({ phonenumber: loginForm.value.username })
// 			.then((res) => {
// 				uni.hideLoading();
// 				uni.$u.toast('验证码已发送');
// 				uCodeRef.value.start();
// 			})
// 			.catch(() => {
// 				uni.hideLoading();
// 				uni.$u.toast('发送失败');
// 			});
// 	} else {
// 		uni.$u.toast('倒计时结束后再发送');
// 	}
// };
const aloneChecked = ref([]);
const emit = defineEmits(['update:modelValue']);
const _login_close = () => {
  emit('update:modelValue', false);
};
// 微信登录
const vxLogin = async (code = '') => {
  // 检查是否同意服务协议
  if (!aloneChecked.value?.length) {
    uni.$u.toast('请先勾选服务协议');
    return;
  }

  // 显示加载提示
  try {
    uni.showLoading({
      title: '正在登录',
      mask: true
    });

    // 获取微信登录code
    const wxCode = await getWxCode();
    
    // 构建登录参数
    const loginParams = {
      code: wxCode, 
      phoneCode: code
    }
    // 执行登录请求
    const loginResult = await wxLogin('miniapp', loginParams);
    // 处理登录响应
    if (loginResult?.data?.token) {
      setToken(loginResult.data.token);
      const userInfo = await userStore.getInfo(loginResult.data?.user?.userId);
      uni.$u.toast('登录成功');
      emit('update:modelValue', userInfo);
      _login_close();
    } else {
      uni.$u.toast('登录失败');
    }
  } catch (error) {
    console.error('登录失败:', error);
    uni.$u.toast('登录失败,请稍后重试');
  } finally {
  
  }
};

const onGetPhoneNumber = (e) => {
	console.log(e);
	if (!e.detail.code) {
		// is_mobel.value = !is_mobel.value;
		return uni.$u.toast('手机号获取失败，请使用验证码进行登录');
	} else {
		vxLogin(e.detail.code);
	}
};
</script>

<style lang="scss" scoped>
.code_btn {
	width: 275rpx;
	padding: 20rpx;

	height: 100%;
	// display: flex;
	// flex: 1 1 auto;
	margin-left: 15rpx;

	.code_btn_item {
		width: 100%;
		height: 100%;
		font-size: 26rpx;
		border-left: 1px solid #999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.input-item {
	margin: 20px auto;
	background-color: #f5f6f7;
	height: 45px;
	border-radius: 20px;

	.icon {
		font-size: 38rpx;
		margin-left: 10px;
		color: #999;
	}

	.input {
		width: 60%;
		font-size: 14px;
		line-height: 20px;
		text-align: left;
		padding-left: 15px;
	}
}

.login-btn {
	margin-top: 40px;
	height: 45px;
}

.xieyi {
	color: #333;
	margin-top: 20px;
}

.login-code {
	height: 38px;
	float: right;

	.login-code-img {
		height: 38px;
		position: absolute;
		margin-left: 10px;
		width: 200rpx;
	}
}

.popup_login {
	padding: 40rpx;
	width: 100%;
	transition: height 0.5s ease;

	.popup_login_header {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.popup_login_btn {
		margin-top: 40rpx;
		margin-bottom: 0rpx;
		width: 100%;
		padding: 25rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 34rpx;
		background: linear-gradient(305deg, #e8d4a8 0%, #ccaa6f 100%);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popup_login_msg {
		width: 100%;
		width: 100%;
		display: flex;
		align-items: center;

		.agreements {
			color: #c8c9cc;
			font-size: 26rpx;
			margin-left: 20rpx;

			.agreements_text {
				color: #82848a;
			}
		}
	}
}

.btn {
	all: unset;
	position: relative;
}

.btn::after {
	border: none;
}
</style>
